<%@ page import="DATA.User" %><%--
  Created by IntelliJ IDEA.
  User: 123456
  Date: 2023/5/25
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UserDetail</title>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            cursor: default;
        }

        header {
            position: absolute;
            width: 100%;
            height: 100px;
            background-color: black;
        }

        .title {
            /* padding: auto; */
            position: absolute;
            color: white;
            font-size: 50px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            line-height: 90px;
            left: 33px;
        }

        .tables {
            position: absolute;
            width: 60%;
            height: 100%;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table {
            width: 20%;
            height: 100%;
            color: white;
            background-color: black;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;
        }

        .table:hover {
            background-color: rgb(107, 105, 105);
        }

        .user {
            /* position: absolute; */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 100px;
            /* background-color: red; */
            right: 0;
            color: white;
        }

        .user img {
            width: 80px;
            height: auto;
            border-radius: 50%;
        }

        .container {
            height: 100%;
            background-color: antiquewhite;
            /* background-image: url(preview.jpg); */
            /*background: url("preview.jpg") no-repeat;*/
            background-image: url("img/sky (2).jpg");
            background-attachment: fixed;
            background-size: cover;
        }

        .big {
            /* background-image: linear-gradient(to right, #a9c4f2, rgb(173, 173, 173)); */
            background-color: rgba(128, 128, 128, 0.502);
            width: 800px;
            height: 500px;
            border-radius: 50px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* background-image: url(sky.jpg); */
        }

        .header {
            width: 100%;
            height: 50%;
            top: 0;
            position: relative;
            cursor: default;
        }

        .head {
            width: 200px;
            height: 200px;
            position: absolute;
            bottom: 0;
        }

        .head img {
            width: 200px;
            height: auto;
            border-radius: 50px;
        }

        .right {
            width: 400px;
            height: 200px;
            /* border:1px solid; */
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .info {
            height: 50px;
            font-size: larger;
            color: brown;
        }

        button {
            height: 40px;
            width: 100px;
            background-image: linear-gradient(to right, #f2e7a9, rgb(173, 173, 173));
            margin-right: 20px;
        }
    </style>
</head>

<body>
<header>
    <div class="title">
        BookCLUB
    </div>
    <div class="tables">
        <div class="table" onclick="toHome()">
            <div>首页</div>
        </div>
        <div class="table" onclick="toBook()">
            <div>阅读</div>
        </div>
        <div class="table" onclick="allclick()">
            <div>讨论</div>
        </div>
        <div class="user" onclick="toUser()">
            <img src="img/nullhead.png">
            <div style="margin: 10px;" id="getName"><%=session.getAttribute("user")%></div>
        </div>
    </div>
</header>
<div class="container">
    <div class="big">
        <div class="header">
            <div class="head">
                <img src="img/nullhead.png">
            </div>
            <div class="right">
                <div class="info">
                    用户名 |<%=session.getAttribute("user")%>
                </div>
                <div class="info">
                    邮&nbsp&nbsp&nbsp箱 |<%=session.getAttribute("Email")%>
                </div>
                <div class="info">
                    密&nbsp&nbsp&nbsp码 | ****
                </div>
                <button onclick="modifyInfo()">
                    修改信息
                </button>
                <button onclick="deleteInfo()">
                    注销账号
                </button>
            </div>
        </div>
        <div style="display: none"><form  method="post" action="/DeleteUser" id="DeleteUser"></form></div>
        <form style="display: none" method="post" action="/BookList" id="BookList"></form>
        <%--不想用ajax，那么前端发送信息给后端就必须用表单的form，故在此投机取巧--%>
    </div>
</div>
</body>

</html>
<script>
    window.onload=function(){
        var t=document.getElementById('getName').innerText;
        if(t.length>10){
            t=t.substring(0,9)+"...";
            document.getElementById('getName').innerText=t;
        }
    }
    allclick = function () {
        alert("暂不提供此功能");
    }
    modifyInfo=function (){
        window.location.href='modifyInfo.jsp'
    }
    deleteInfo = function (){
        let a=confirm('你确定要注销账号吗？此操作不可逆转');
        if(a){
            var form=document.getElementById('DeleteUser');
            form.submit();
        }
    }
    toHome=function (){
        window.location.href='Homepage.jsp';
    }
    toUser=function (){
        window.location.href='UserDetail.jsp';
    }
    toBook=function (){
        var b=document.getElementById('BookList');
        b.submit();
    }
</script>



